<template>
	<view>
		<Header :title="title" :backshow="false"></Header>
		<view class="toubu">
			
			<view class="leiji_header">
				
				<view class="shouyi_title">
					<view>
						<text></text>
						<text style="border:0px;margin-left:12rpx;" v-if="state==1">消费明细</text>
						<text style="border:0px;margin-left:12rpx;" v-else>充值明细</text>
					</view>
					<!-- 筛选按钮 -->
					<view class="shouyi_shaixuan" @click="tanchu">
						{{type_name}}
						<image src="/static/image/me/jilu_shaixuan.png"></image>
					</view>
				</view>
			</view>
			
			
			<view class="leiji_header" style="padding-top:30rpx;" v-if="state==0">
				<view class="shouyi_con" v-for="item in payxinxi" >
					<view class='shouyi_list' >
						<view class="shouyi_list_list">
							<view class="bianhao">订单编号：{{item.shopordernum}}</view>
							<view class="zhuce_color">{{filterStatus(item.type)}}</view>
						</view>
						<view class="shouyi_list_list">
							<view>{{publics.timestampToTime(item.paytime)}}</view>
							<view>{{item.money}}</view>
						</view>
					</view>
				</view>	
				
				<view class="grace-loading" v-if="xiala==0 && payxinxi.length > 15">上拉加载更多~</view>
				<view class="grace-loading" v-if="xiala==1">没有更多数据啦~</view>	
				<zanwushuju v-if="payxinxi.length==0"></zanwushuju>
			</view>
			<view class="leiji_header" style="padding-top:30rpx;" v-if="state==1">
				<view class="shouyi_con" v-for="item in xiaofei" >
					<view class='shouyi_list' >
						<view class="shouyi_list_list">
							<view class="bianhao">客资ID：{{item.id}}
							<image src="/static/image/me/fuzhi.png" @click.stop="publics.fuzhi(item.id)" class="fuzhi"></image>
							</view>
							<view class="zhuce_color">{{item.typename}}</view>
						</view>
						<view class="shouyi_list_list">
							<view>{{publics.timestampToTime(item.createtime)}}</view>
							<view v-if="item.typeid == 0">-{{item.changemoney}}</view>
							<view v-if="item.typeid == 1">+{{item.changemoney}}</view>
						</view>
					</view>
				</view>
				
				
				<view class="grace-loading" v-if="xiala==0 && xiaofei.length > 15">上拉加载更多~</view>
				<view class="grace-loading" v-if="xiala==1 && zanwu != 1">没有更多数据啦~</view>
				<zanwushuju v-if="xiaofei.length==0 && zanwu==1"></zanwushuju>
			</view>
		</view>
		<!-- <mingxi :show="show" @queding="shaixuan" :state="state"></mingxi> -->
		<mingxi :show="show" @queding="shaixuan" :state="state" :zuangtai="zuangtai"></mingxi> 
		
		<requestLoading></requestLoading>
	</view>
</template>

<script>
	import mingxi from "@/components/mingxi.vue"
	export default {
		components:{
			mingxi
		},
		data() {
			return {
				zanwu:1,
				tishi: 1, //展示加载动画
				pagenum:1,
				xiala:999,
				show:false,   //是否展示弹框
				zuangtai:1,   //类型状态
				type_name:'全部',   //类型名称
				title:'',
				payxinxi:[],
				url:'',
				xiaofei:[],
				state:0
				
			}
		},
		onLoad(option) {
			// 0  充值   1消费
			if(option.state==0){
				this.title="充值记录";
				this.zuangtai=1;
				this.url="shop/pay/xiangqing"
				
			}else{
				this.title="消费明细"
				this.zuangtai=0;
				this.url="wode/xiaofei/shaixuan"
			}
			this.state=option.state;
			this.leijijilu();
		},
		onPullDownRefresh() {
		   	this.tishi=2;
			this.xiala=-1;
			this.pagenum=1;
			this.leijijilu()
			console.log("触发下拉刷新")
		}, 
		onReachBottom() {
			console.log("上拉加载")
				if(this.xiala===0){
						this.pagenum++;
						this.tishi=1;
						// this.zuangtai;
						this.leijijilu()
						// this.shaixuan()
				}
		},
		methods: {
			leijijilu(){
				var that = this;
				var aaa;
				if(that.zuangtai == 0){
					aaa={
						typeid:that.zuangtai,
						pagenum:that.pagenum,
						shopid:0
					}
				}else{
					aaa={
						typeid:that.zuangtai,
						pagenum:that.pagenum,
					}
				}
				// if(this.state==0){
					this.configure.ajax({
						url: that.url,
						tishi: that.tishi,
						data: aaa,
						method: 'POST',
						success: function(res) {
							if(that.state==0){
								console.log('0')
								if (res.data.pay == null || res.data.pay.length == 0) {
										that.xiala=1;
										return ;
								}else{
									that.xiala=0;
									if(that.tishi===2){
										that.payxinxi=res.data.pay
									}if(that.pagenum==1){
										that.payxinxi=res.data.pay
									}else{
										that.payxinxi = that.payxinxi.concat(res.data.pay)
									}
									
								}
							}else{
								console.log('1')
								if (res.data.num == null || res.data.num.length == 0) {
										that.xiala=1;
										return ;
								}else{
									that.xiala=0;
									console.log('111111111111111111111')
									console.log(that.tishi)
									
									if(that.tishi===2){
										that.xiaofei = res.data.num
									}else{
										if(that.pagenum==1){
											that.xiaofei=res.data.num;
										}else{
											that.xiaofei = that.xiaofei.concat(res.data.num)
											console.log(that.xiaofei)
										}
										
									}
									
								}
							}
							
							// that.userinfo=res.data;
							that.tishi='1111'
						}
					})
				// }
				
			},
			
			   filterStatus(val) {
					if (val == "1") {
						return "客资余额(充值)";
					}else if (val == "2") {
						return "成交余额(充值)";
					}else if (val == "3") {
						return "客资余额(平台赠送)";
					}else if (val == "4") {
						return "成交余额(平台赠送)";
					}else if (val == "5") {
						return "客资退回";
					}else if (val == "6") {
						return "成交退回";
					}
				},
			tanchu(){
				this.show=true;
			},
			shaixuan(e){
				var that = this;
				
				if(e.state!=6){
					that.type_name=e.type_name;
					console.log('进行操作')
					if(e.xiabiao!==that.zuangtai){
						that.pagenum=1;
						that.tishi=1;
						that.zuangtai=e.xiabiao;
						that.leijijilu();
					}
				}
				this.show = e.show;
			}
		}
	}
</script>

<style scoped lang="scss">
	.fuzhi{
			  	width:24rpx;
			  	height:24rpx;
			  	margin-left:18rpx;
	}
	.grace-loading{
		text-align: center;
		color: $qianhui_ziti;
		font-size: 30rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}
	.bianhao{
		word-break: break-all;
		    display: -webkit-box;
		    -webkit-line-clamp: 1;
		    -webkit-box-orient: vertical;
		    overflow: hidden;
		    width: 310rpx;
	}
	.leiji_header{
		width: 100%;
		    overflow: hidden;
	}
	.me_jilu_header{
		width: calc(100% - 60rpx);
		background: #FFFFFF;
	    display: flex;
		padding:0rpx 30rpx;
	    justify-content: space-between;
		align-items: center;
		color:$qianhui_ziti;
		font-size:30rpx;
		z-index: 9999;
		text{
			color:$heise_ziti;
			font-size:50rpx;
			font-weight:bold;
			margin-right:12rpx;
		}
		image{
			width:186rpx;
			height:150rpx;
		}
		
	}
	.shouyi_title{
		width: calc(100% - 60rpx);
		padding:20rpx 30rpx 30rpx 30rpx;
		display: flex;
		background:$white_ziti;
		justify-content: space-between;
		font-size:30rpx;
		color:$heise_ziti;
		align-items: center;
		text{
			font-weight:bold;
			text-indent:12rpx;
			border-left: 6rpx solid $zhuce_color;
		}
		.shouyi_shaixuan{
			display: flex;
			align-items: center;
			box-shadow: $shadow_zhuse;
			border-radius: 20px;
			font-size:26rpx;
			color:$heise_ziti;
			padding:22rpx 30rpx  22rpx 40rpx;
			image{
				width:28rpx;
				height:32rpx;
				margin-left:20rpx;
			}
		}
	}
	.shouyi_con{
		width: calc(100% - 60rpx);
		margin: 0 auto;
		overflow: hidden;
		margin-bottom:30rpx;
		border-radius: 12px;
		box-shadow: $shadow;
	}
	.shouyi_list{
		width: calc(100% - 60rpx);
		margin:0 auto;
		.shouyi_list_list{
			line-height: 50rpx;
			padding:20rpx 0rpx;
			display: flex;			justify-content: space-between;
			font-size:26rpx;
			color:$heise_ziti;
		}
	}
	.shouyi_list .shouyi_list_list:nth-child(1) {
		border-bottom: 2rpx solid $qianhui_eee;
	}
	
</style>
